<template>
  <div class="front new-help">
    <div class="header-box">
      <Header></Header>
    </div>
    <div class="new-container">
      <div class="main">
        <div class="right">
          <div class="title">帮助中心</div>
          <el-collapse v-model="activeNames">
            <el-collapse-item title="平台资质" name="1" v-if="footerData.about">
              <div v-for="(item,index) in footerData.about" :key="index" class="btn" @click="newSelect(item.id)">
                {{item.name}}
              </div>
            </el-collapse-item>
            <el-collapse-item title="平台协议" name="4" v-if="footerData.agreement">
              <div v-for="(item,index) in footerData.agreement" :key="index" class="btn" @click="newSelect(item.id)">
                {{item.name}}
              </div>
            </el-collapse-item>
            <el-collapse-item title="新手指南" name="5" v-if="footerData.newGuy">
              <div v-for="(item,index) in footerData.newGuy" :key="index" class="btn" @click="newSelect(item.id)">
                {{item.name}}
              </div>
            </el-collapse-item>
            <el-collapse-item title="常见问题" name="2" v-if="footerData.question">
              <div v-for="(item,index) in footerData.question" :key="index" class="btn" @click="newSelect(item.id)">
                {{item.name}}
              </div>
            </el-collapse-item>
            <el-collapse-item title="角色权限列表" name="3" v-if="footerData.jurisdiction">
              <div v-for="(item,index) in footerData.jurisdiction" :key="index" class="btn" @click="newSelect(item.id)">
                {{item.name}}
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="left">
          <h2>{{detail.name}}</h2>
          <p v-html="detail.remark"></p>
        </div>
      </div>
    </div>

    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getNewDetail } from "@/api/front-home.js";
import Footer from "@/views/front/components/Footer";
import Header from "@/views/front/components/Header";
export default {
  components: {
    Footer,
    Header,
  },
  data() {
    return {
      detail: {},
      newsList: [],
      // activeNames: ['1', '2', '3', '4', '5'],
      activeNames: ['1']
    };
  },
  computed: {
    ...mapState({
      footerData: state => state.front.footerData,
    })
  },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        let id = this.$route.query.id;
        this.getNewDetail(id);
        if (this.findOnTheList(this.footerData.about, id)) {
          this.activeNames = ['1']
        } else if (this.findOnTheList(this.footerData.question, id)) {
          this.activeNames = ['2']
        } else if (this.findOnTheList(this.footerData.jurisdiction, id)) {
          this.activeNames = ['3']
        } else if (this.findOnTheList(this.footerData.agreement, id)) {
          this.activeNames = ['4']
        } else if (this.findOnTheList(this.footerData.newGuy, id)) {
          this.activeNames = ['5']
        }
      },
    },
  },
  created() {
    if (!this.footerData.about || !this.footerData.about.length > 0) {
      this.$store.dispatch('front/getNews', 'aboutPlatform')
      this.$store.dispatch('front/getNews', 'question')
      this.$store.dispatch('front/getNews', 'jurisdiction')
      this.$store.dispatch('front/getNews', 'agreement')
      this.$store.dispatch('front/getNews', 'newGuy')
    }
  },
  methods: {
    getNewDetail(id) {
      getNewDetail({ id: id }).then((res) => {
        this.detail = res;
      });
    },
    newSelect(id) {
      this.getNewDetail(id);
    },
    findOnTheList(list, id) {
      let find = false
      if (list && list.length > 0) {
        list.some(item => {
          if (Number(id) === item.id) {
            find = true
            return true
          }
        })
        return find
      } else {
        return false
      }
    }
  },
};
</script>
<style >
.hover:hover {
  color: #965f29;
}
.new-help .el-collapse-item__header {
  padding: 0 10px;
  background-color: #efefef;
  font-size: 18px;
}
.new-help .el-collapse-item__content {
  padding: 10px 20px;
  line-height: 2.5;
  font-size: 16px;
  cursor: pointer;
}
</style>
<style lang="scss" scoped>
.new-help {
  .new-container {
    width: 1200px;
    margin: 20px auto;
    .mianbao {
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #000000;
    }
    .main {
      display: flex;
      .left {
        flex: 1;
        padding: 33px 49px;
        box-sizing: border-box;
        border: 1px solid #eeeeee;
        h2 {
          text-align: center;
          font-size: 30px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
        }
        .date {
          margin: 15px 0px 20px;
          text-align: center;
          color: #555555;
        }
        p {
          line-height: 30px;
          margin-top: 49px;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 300;
          color: #555555;
        }
      }
      .right {
        width: 280px;
        // border: 1px solid #eeeeee;
        margin-right: 31px;
        margin-bottom: 10px;
        .title {
          height: 52px;
          line-height: 52px;
          color: #fff;
          text-align: center;
          background-color: #965f29;
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>